<script setup lang="ts">
import { ref, onMounted, getCurrentInstance, reactive, watch, Ref } from "vue";
import { useRouter } from "vue-router";
import { Modal } from "@/components/index";
import gsap from "gsap";

const number = ref(0);
const tweened = reactive({
  number: 0,
});

watch(number, (n) => {
  gsap.to(tweened, { duration: 0.5, number: Number(n) || 0 });
});

const info = reactive({
  list: [
    { src: "", name: "1" },
    { src: "", name: "2" },
    { src: "", name: "3" },
    { src: "", name: "4" },
    { src: "", name: "5" },
  ],
});

const activeIndex: Ref<number | null> = ref(null);

const updateActiveIndex: (index: number | null) => void = (index: number | null) => {
  activeIndex.value = index;
};

const getWidth = (isActive: boolean) => {
  if (isActive) {
    return `width: 70%;`;
  }
  return `width: ${100 / info.list.length}%`;
};

const router = useRouter();
const toNextPage = (index: number) => {
  const pathParams = info.list[index].src;
  router.push(`/detail?src=${pathParams}`);
};
</script>

<template>
  <div class="page-box" @mouseleave="updateActiveIndex(null)">
    <div class="home-container">
      <div
        v-for="(item, index) of info.list"
        :class="index === activeIndex ? 'active-box' : 'box'"
        :style="getWidth(index === activeIndex)"
        :key="index"
        @mouseover="updateActiveIndex(index)"
        @click="toNextPage(index)"
      >
        {{ item.name }}
      </div>
      <!-- Type a number: <input v-model.number="number" /> -->
      <!-- <p>{{ tweened.number.toFixed(0) }}</p> -->
    </div>
  </div>
</template>

<style scoped lang="scss">
.home-container {
  width: 100%;
  height: 100%;
  display: flex;
  background: pink;
  .box {
    transition: 0.8s;
  }
  .active-box {
    transition: 0.8s;
  }
}
</style>
